<template>
    <div>
        <el-row>
            <!-- 循环渲染轮播图 -->
            <el-col :span="8" v-for="(e, idx) in list" :key="idx">
                <el-card :body-style="{ padding: '0px' }">
                    <!-- 轮播图线上地址 -->
                    <img :src="$http.defaults.baseURL + '/' + e.name" class="image">
                    <!-- 删除按钮 -->
                    <el-button class="btn" size="mini" type="danger" @click="deleteCarousel(e.id)">删除</el-button>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            //轮播图列表
            list: [],
        };
    },
    methods: {
        deleteCarousel(imgId) {
            //是否删除
            if (!confirm('确定删除该轮播图吗？')) return;
            //请求删除轮播图
            this.$http.post('/carousel/backend/remove', {imgId}).then(({ data: { code } }) => {
                    //消息显示
                    if (code != 1) return alert('删除失败！');
                    //删除轮播图
                    this.list = this.list.filter(e => e.id != imgId);
                })
        }
    },
    created() {
        //初始化获取轮播图列表
        this.$http.get('/carousel/list').then(({ data: { code, list } }) => {
                if (code != 1) return console.log('获取轮播图列表失败');
                this.list = list;
            })
    }
}
</script>

<style scoped>
.image {
    /* width: 100%; */
    width: 334px;
    height: 213px;
    display: block;
}

.btn {
    margin-top: 5px;
    margin-left: 40%;
    margin-bottom: 5px;
}
</style>